<template>
  <div style="background-color: #F8F8F8;">
      <div>
        <van-cell style="background-color: #FFE64A;">
          <!-- 头像 -->
          <van-col span="6">
            <van-image
              round
              cover
              width="5rem"
              height="5rem"
              :src="getImagePath(shop.shopImg)"
            />
          </van-col>
          <van-col span="18" style="font-size: 20px;">{{shop.shopName}}</van-col>
        </van-cell>
      </div>

      <!-- 我的订单 -->
          <van-cell-group inset>
            <van-grid :border="false">
              <van-grid-item :icon="require('../../assets/img/我的订单.png')" text="我的订单" />
              <van-grid-item :icon="require('../../assets/img/退款售后.png')" text="文字" />
              <van-grid-item :icon="require('../../assets/img/我的订单.png')" text="文字" />
              <van-grid-item :icon="require('../../assets/img/退款售后.png')" text="退款售后" />

              <!-- <van-grid-item  text="我的订单" />
              <van-grid-item  text="文字" />
              <van-grid-item  text="文字" />
              <van-grid-item  text="退款售后" /> -->
            </van-grid>
          </van-cell-group>
        

        <!-- 我的钱包 -->
        <van-cell-group inset class="my-purse">
          <van-cell is-link>
            <van-col span="19" style="font-size: 16px; font-weight: bold;">我的钱包</van-col>
            <van-col span="5" style="font-size: 14px; color: #C4C5B3;">进入钱包</van-col>

            <van-col span="24" class="my-check">
              <van-grid :border="false" :column-num="3" gutter="10">
                <!-- 我的账单 -->
                <van-grid-item>
                  <van-col span="24" style="font-size: 18px; font-weight: bold;">{{ (total * 0.7).toFixed(2) }}元</van-col>
                  <van-col span="24" style="font-size: 14px;">我的账单</van-col>
                  <van-col span="24" style="font-size: 12px; color: #C4C5B3;">最近支付</van-col>
                </van-grid-item>
                <!-- 外卖卷 -->
                <van-grid-item>
                  <van-col span="24" style="font-size: 18px; font-weight: bold;">27元</van-col>
                  <van-col span="24" style="font-size: 14px;">外卖卷</van-col>
                  <van-col span="24" style="font-size: 12px; color: #C4C5B3;">点击领取</van-col>
                </van-grid-item>
                <!-- 店铺评分 -->
                <van-grid-item>
                  <van-col span="24" style="font-size: 18px; font-weight: bold;">90分</van-col>
                  <van-col span="24" style="font-size: 14px;">店铺分</van-col>
                  <van-col span="24" style="font-size: 12px; color: #C4C5B3;">点击涨分</van-col>
                </van-grid-item>
              </van-grid>
            </van-col>
          </van-cell>
        </van-cell-group>


        <van-cell-group inset style="margin-top: 8px;">
          <van-cell title="我的红包" is-link />
          <van-cell title="我的地址" is-link />
          <van-cell title="我的收藏" is-link />
          <van-cell title="我的评价" is-link />
          <van-cell title="客服中心" is-link />
        </van-cell-group>
            

        <!-- 底部导航栏 -->
        <van-tabbar v-model="active">
          <van-tabbar-item icon="home-o">标签</van-tabbar-item>
          <van-tabbar-item icon="search">标签</van-tabbar-item>
          <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
          <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
        </van-tabbar>

        
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'BusinessMy',
  data(){
    return{
      baseUrl: 'http://localhost:8081/images/shop/',
      active: 0,
      // 商家信息
      shop:this.$store.state.shop,
      total:0
    };
  },
  methods:{
    //拼接地址
    getImagePath(imgName){
      return `${this.baseUrl}${imgName}`;
    },
     // 查询配送完成的订单
     deliveryCompleted(status){
      axios.get('/api/shop/Order/listShopIsRiderOrder', {
        params: {
          shopId: this.shop.shopId,
          status
        }
      })
      .then(response => {
        // 处理响应数据
        if (response.data.code === 200) {
          
          this.successOrder = response.data.data;

          this.successOrder.forEach(o => {
            this.total += o.totalPrice;
          })
          console.log(this.successOrder);
        }
      })
      .catch(error => {
        // 处理错误
        console.error(error);
      });
    },
  },
  created() {
    this.deliveryCompleted(5)
  },
}
</script>
  
<style scoped>
*{
  margin: 0;
  padding: 0;
}
.van-cell-group{
  position: relative;
  top: -13px;
}
.my-purse{
  margin-top: 10px;
}
.my-check{
  height: 90px;
}
</style>
